<template>
    <div>
      <div class="video2-hed">
        <div class="v2-left">
          <img @click="bac3()" :src="'./static/lyl/back2.png'" alt="">
          <span>视频播放</span>
        </div>
        <img @click="isbare2" :src="'./static/lyl/san2.png'" alt="">
      </div>
      <video :src="smeta" controls width="100%" :poster="thumb"></video>
      <div class="v2-cont">
        <p>{{video_title}}</p>
        <p>{{video_description}}</p>
        <p>
          <img :src="'./static/lyl/time.png'" alt="">
          <span>{{create_time}}</span>
          <img :src="'./static/lyl/loke.png'" alt="">
          <span>{{play}}</span>
        </p>
        <div class="vi2-fot">
          <p @click="like7()">
            <img :src="status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt=""><br>
            <span>{{likes}}</span>
          </p>
          <p @click="shou()">
            <img src="../../../assets/img/shoucang.png" alt=""><br>
            <span>{{favorite}}</span>
          </p>
          <p @click="pingL()">
            <img src="../../../assets/img/ping.png" alt=""><br>
            <span>{{comment_num}}</span>
          </p>
          <p v-if="is_vote==1?true:false" @click="videovote()">
            <img :src="'./static/lyl/vote.png'" alt=""><br>
            <span>{{vote_status==0?'投票':'已投票'}}</span>
          </p>
          <p>
            <img src="../../../assets/img/huancun.png" alt=""><br>
            <span>缓存</span>
          </p>
        </div>
      </div>
      <p class="vo2p">相关视频</p>
      <ul class="xia_ul">
        <li v-for="(item,index) in videoData" :key="index">
          <div class="img">
            <img :src="item.thumb" alt="">
            <img @click="playVideo(item)" :src="'./static/lyl/video.png'" alt="">
            <p>
              <img :src="'./static/lyl/bai.png'" alt="">
              <span>{{item.play}}</span>
            </p>
          </div>
          <p>{{item.video_title}}</p>
        </li>
      </ul>
      <p class="vo2p">评论 <span>{{comment_num}}条</span></p>
      <ul class="y_ul">
        <li v-for="(item,index) in yongData" :key="index">
          <div class="y_left">
            <img :src="item.avatar" alt="">
          </div>
          <div class="y_right">
            <p>{{item.user_login}}</p>
            <p>{{item.content}}</p>
            <p class="ping_p" v-for="(item2,index2) in item.to_comments" :key="index2">
              <span>{{item2.user_login}} :</span>
              <span>{{item2.content}}</span>
            </p>
            <div class="y_foot">
              <span>{{item.createtime}}</span>
              <div class="y_rig">
                <img @click="pingL2(item)" src="../../../assets/img/ping.png" alt="">
                <img @click="like3(item)" :src="item.status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt="">
                <span>{{item.like_num}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <!--评论输入框-->
      <div v-if="piShow" class="input">
        <input autofocus="autofocus" type="text" v-model="p_cont" placeholder="评论">
        <span @click="sendL()">发送</span>
      </div>

      <transition name="van-slide-right">
        <div v-show="visible" class="tran_right">{{Fade}}</div>
      </transition>

      <van-popup v-model="bolls" position="bottom">
        <div class="fotsss" v-for="(item,index) in imgData" :key="index">
          <img :src="item" alt="">
          <p>分享到微信</p>
        </div>
      </van-popup>
    </div>
</template>

<script>
  import * as list from "../../../api/list.js";
  import * as search from "../../../api/search.js";
  import {Dialog} from 'vant';
    export default {
      name: "Video2",
      data(){
        return {
          Fade:'',
          visible:false,
          bolls:false,
          imgData:['./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg'],
          smeta:'',
          thumb:'',
          video_title:'',
          video_description:'',
          create_time:'',
          play:'',
          status:'',
          vote_status:'',
          likes:'',
          videoData:[],
          is_vote:'',//是否显示投票
          favorite:'',
          comment_num:'',
          favorite_status:'',//是否收藏
          yongData:[],
          p_cont:'',
          piShow:false,
          OneSend:true,
          to_uid:'',
          parentid:''
        }
      },
      beforeMount(){
        let parmes3 = {
          id:this.$route.params.id2,
          user_id:this.$store.state.user_id
        };
        list.playVideo(parmes3).then(res=>{
          console.log('视频播放页',res);
          this.smeta = res.smeta;
          this.thumb = res.thumb;
          this.video_title = res.video_title;
          this.video_description = res.video_description;
          this.create_time = res.create_time;
          this.play = res.play;
          this.likes = res.likes;
          this.status = res.status;
          this.vote_status = res.vote_status;
          this.is_vote = res.is_vote;
          this.favorite = res.favorite;
          this.comment_num = res.comment_num;
          this.favorite_status = res.favorite_status;
        });

        //相关视频
        let parmes6 = {
          active_id:this.$route.params.id3,
          num:4
        };
        list.recommendedVideo(parmes6).then(res=>{
          console.log('相关视频',res);
          this.videoData = res.data;
        })

        //评论列表
        let parms = {type:3,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
        search.commentList(parms).then(res=>{
          console.log('评论列表',res)
          this.yongData = res.comments
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        videovote(){
          if (this.vote_status==0){
            this.$router.push('/videovote/'+this.$route.params.id3+'/'+this.$route.params.id2)
          } else{
            Dialog.alert({
              message: "你已投票，谢谢您的支持"
            });
          }
        },
        bac3(){
          history.go(-1)
        },
        playVideo(item){
          item.play=Number(item.play)+1;
          let parmes3 = {
            id:item.id,
            user_id:this.$store.state.user_id
          };
          list.playVideo(parmes3).then(res=>{
            console.log(res);
            this.smeta = res.smeta;
            this.video_title = res.video_title;
            this.video_description = res.video_description;
            this.create_time = res.create_time;
            this.play = res.play;
            this.likes = res.likes;
            this.status = res.status;
            this.vote_status = res.vote_status;
          })
        },
        shou(){
          if (this.favorite_status==1){
            this.favorite_status = 0;
            //取消收藏
            let parms2 = {favorite_id:this.$route.params.id2,status:0,user_id:this.$store.state.user_id,active_id:this.$route.params.id3,type:1}
            search.favorite(parms2).then(res=>{
              console.log('取消收藏',res)
              this.favorite -=1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
          } else{
            this.favorite_status = 1;
            //添加收藏
            let parms2 = {favorite_id:this.$route.params.id2,status:1,user_id:this.$store.state.user_id,active_id:this.$route.params.id3,type:1}
            search.favorite(parms2).then(res=>{
              console.log('添加收藏',res)
              this.favorite = Number(this.favorite) + 1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
          }

        },
        pingL(){
          this.piShow = true;
          this.OneSend = true
        },
        pingL2(item){
          this.piShow = true;
          this.OneSend = false;
          this.to_uid = item.uid;
          this.parentid = item.id
        },
        like3(itl){
          if (itl.status==1){
            itl.status=0;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num -=1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          } else{
            itl.status=1;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            search.commentLike(parms).then(res=>{
              console.log(res);
              itl.like_num = Number(itl.like_num) + 1;
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }
        },
        sendL(){
          if (this.OneSend) {
            let params = {type:3,post_id:this.$route.params.id2,uid:this.$store.state.user_id,content:this.p_cont};
            search.comment(params).then(res=>{
              console.log('评论',res);
              this.piShow = false;
              this.comment_num = Number(this.comment_num) + 1;
              this.p_cont = '';
              //评论列表
              let parms = {type:3,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
              search.commentList(parms).then(res=>{
                console.log('评论列表',res)
                this.yongData = res.comments
              })
            })
          }else{
            let params = {type:3,post_id:this.$route.params.id2,uid:this.$store.state.user_id,content:this.p_cont,to_uid:this.to_uid,parentid:this.parentid};
            search.comment(params).then(res=>{
              console.log('二级评论',res);
              this.piShow = false;
              this.comment_num = Number(this.comment_num) + 1;
              this.p_cont = '';
              //评论列表
              let parms = {type:3,post_id:this.$route.params.id2,user_id:this.$store.state.user_id};
              search.commentList(parms).then(res=>{
                console.log('评论列表',res)
                this.yongData = res.comments
              })
            })
          }

        },
        like7(){
          if (this.status==1){
            this.status=0;
            this.likes-=1;
            let parms = {
              video_id:this.$route.params.id2,
              user_id:this.$store.state.user_id,
              status:this.status
            };
            list.videoLike(parms).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          } else{
            this.status=1;
            this.likes = Number(this.likes)+1;
            let parms = {
              video_id:this.$route.params.id2,
              user_id:this.$store.state.user_id,
              status:this.status
            };
            list.videoLike(parms).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }
        },
        isbare2(){
          this.bolls = !this.bolls;
        }
      }
    }
</script>

<style scoped>
  .video2-hed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
  }
  .video2-hed .v2-left img{
    width: 22px;
    height: 40px;
    margin-right: 40px;
  }
  .video2-hed .v2-left span{
    font-size: 30px;
    color: #fff;
    vertical-align: top;
  }
  .video2-hed>img{
    width: 56px;
    align-self: center;
  }
  .v2-cont{
    padding: 20px 40px;
    border-bottom: 1px solid #dcdcdc;
  }
  .v2-cont>p{
    padding-bottom: 10px;
  }
  .v2-cont>p:nth-child(1){
    font-size: 32px;
    font-weight: bold;
  }
  .v2-cont>p:nth-child(2){
    font-size: 24px;
    color: #8c8c8c;
  }
  .v2-cont>p:nth-child(3) img{
    width: 30px;
    vertical-align: bottom;
  }
  .v2-cont>p:nth-child(3) img:nth-child(3){
    width: 36px;
    vertical-align: bottom;
  }
  .v2-cont>p:nth-child(3) span{
    font-size: 24px;
    color: #8c8c8c;
    margin: 0 20px;
  }
  .vi2-fot{
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
  }
  .vi2-fot p{
    text-align: center;
    align-self: center;
  }
  .vi2-fot p img{
    width: 30px;
    height: 30px;
  }
  /*.vi2-fot p:nth-child(2) img{*/
    /*height: 37px;*/
  /*}*/
  .vi2-fot p span{
    font-size: 24px;
    color: #884ca4;
  }
  .vo2p{
    font-size: 28px;
    padding: 20px 40px 0;
  }
  .vo2p span{
    padding: 5px 10px;
    font-size: 24px;
    color: #fff;
    background: #884ca4;
    border-radius: 8px;
  }
  .xia_ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 40px;
    border-bottom: 2px solid #dcdcdc;
  }
  .xia_ul li .img{
    position: relative;
  }
  .xia_ul li .img>img:nth-child(1){
    width: 320px;
  }
  .xia_ul li .img>img:nth-child(2){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 54px;
  }
  .xia_ul li .img>p{
    position: absolute;
    left: 10px;
    top: 10px;
    background: #d6d6d6;
    width: 100px;
    height: 30px;
    border-radius: 15px;
    padding: 0;
    text-align: center;
    line-height: 30px;
  }
  .xia_ul li .img>p>img{
    width: 15px;
    height: 18px;
  }
  .xia_ul li .img>p span{
    font-size: 22px;
    color: #fff;
  }
  .xia_ul li p{
    font-size: 28px;
    padding: 20px 0;
  }

  .y_ul li{
    border-bottom: 2px solid #b3b2b2;
    padding: 40px 40px 30px;
    display: flex;
  }
  .y_ul li .y_left img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 30px;
  }
  .y_ul li .y_right{
    flex-grow: 1;
  }
  .y_ul li .y_right p:nth-child(1){
    font-size: 24px;
    color: #717070;
    padding-bottom: 20px;
  }
  .y_ul li .y_right p:nth-child(2){
    font-size: 18px;
    line-height: 30px;
    color: #717070;
    padding-bottom: 20px;
  }
  .y_ul li .y_right .ping_p{
    padding: 20px;
    background: #dcdcdc;
  }
  .y_ul li .y_right .ping_p span{
    font-size: 18px;
  }
  .y_ul li .y_right .ping_p span:nth-child(1){
    color: #884ca4;
  }
  .y_ul li .y_right .y_foot{
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .y_ul li .y_right .y_foot span{
    font-size: 18px;
    color: #9c9a9a;
  }
  .y_ul li .y_right .y_foot .y_rig img{
    width: 35px;
    height: 35px;
  }
  .y_ul li .y_right .y_foot .y_rig img:nth-child(1){
    margin-right: 40px;
  }

  .van-popup{
    width: 100%;
    height: 200px;
    padding: 50px 0;
    display: flex;
    justify-content: space-around;
  }
  .van-popup img{
    width: 100px;
    height: 100px;
  }
  .fotsss{
    text-align: center;
  }
  .fotsss p{
    font-size: 26px;
    padding-top: 10px;
  }

  .input{
    background: #efefef;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
  }
  .input input{
    flex-grow: 1;
    border-radius: 10px;
    padding: 15px;
    font-size: 30px;
    caret-color:#48c261;
  }
  .input span{
    align-self: center;
    margin-left: 40px;
    border-radius: 10px;
    width: 90px;
    height: 60px;
    background: #48c261;
    color: #fff;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
  }
  .tran_right{
    width: 220px;
    height: 60px;
    border-radius: 10px;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    top: 50%;
    left: 50%;
    position: fixed;
    background: rgba(0,0,0,0.6);
    color: #fff;
  }
</style>
